import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int currentPageIndex = 1;

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    return Scaffold(
      backgroundColor: Colors.grey,
      bottomNavigationBar: NavigationBar(
        onDestinationSelected: (int index) {
          setState(() {
            currentPageIndex = index;
          });
        },
        indicatorColor: Colors.amber,
        selectedIndex: currentPageIndex,
        destinations: const [
          NavigationDestination(
            selectedIcon: Icon(Icons.home),
            icon: Icon(Icons.home_outlined),
            label: 'Home',
          ),
          NavigationDestination(
            icon: Badge(child: Icon(Icons.notifications_sharp)),
            label: 'Notifications',
          ),
          NavigationDestination(
            icon: Badge(
              label: Text('2'),
              child: Icon(Icons.messenger_sharp),
            ),
            label: 'Messages',
          ),
        ],
      ),
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          'RPA',
          style: TextStyle(
              color: Colors.red, fontSize: 30, fontWeight: FontWeight.bold),
        ),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: [
        /// Home page
        Card(
          shadowColor: Colors.transparent,
          color: Colors.green,
          margin: const EdgeInsets.all(10.0),
          child: SizedBox.expand(
            child: Center(
              child: Text(
                'Home page',
                style: theme.textTheme.titleLarge,
              ),
            ),
          ),
        ),

        /// Notifications page
        const Padding(
          padding: EdgeInsets.all(8.0),
          child: Column(
            children: [
              Card(
                child: ListTile(
                  leading: Icon(Icons.notifications_sharp),
                  title: Text('Notification 1'),
                  subtitle: Text('This is a notification'),
                ),
              ),
              Card(
                child: ListTile(
                  leading: Icon(Icons.notifications_sharp),
                  title: Text('Notification 2'),
                  subtitle: Text('This is a notification'),
                ),
              ),
            ],
          ),
        ),

        /// Messages page
        ListView.builder(
          reverse: true,
          itemCount: 2,
          itemBuilder: (BuildContext context, int index) {
            if (index == 0) {
              return Align(
                alignment: Alignment.centerRight,
                child: Container(
                  margin: const EdgeInsets.all(8.0),
                  padding: const EdgeInsets.all(8.0),
                  decoration: BoxDecoration(
                    color: theme.colorScheme.primary,
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  child: Text(
                    'Hello',
                    style: theme.textTheme.bodyLarge!
                        .copyWith(color: theme.colorScheme.onPrimary),
                  ),
                ),
              );
            }
            return Align(
              alignment: Alignment.centerLeft,
              child: Container(
                margin: const EdgeInsets.all(8.0),
                padding: const EdgeInsets.all(8.0),
                decoration: BoxDecoration(
                  color: theme.colorScheme.primary,
                  borderRadius: BorderRadius.circular(8.0),
                ),
                child: Text(
                  'Hi!',
                  style: theme.textTheme.bodyLarge!
                      .copyWith(color: theme.colorScheme.onPrimary),
                ),
              ),
            );
          },
        ),
      ][currentPageIndex],
      // floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // _goToBillingDetailPage(context);
        },
        tooltip: 'Add Billing',
        shape: const CircleBorder(),
        child: const Icon(Icons.add),
      ),
    );
  }

// @override
// Widget build(BuildContext context) {
//   final ThemeData theme = Theme.of(context);
//   return Scaffold(
//       backgroundColor: Colors.pink,
//       appBar: AppBar(
//         centerTitle: true,
//         title: const Text(
//           'RPA',
//           style: TextStyle(
//               color: Colors.red, fontSize: 30, fontWeight: FontWeight.bold),
//         ),
//         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
//       ),
//       // floatingActionButtonLocation: FloatingActionButtonLocation.miniCenterDocked,
//       floatingActionButton: FloatingActionButton(
//         onPressed: () {
//           // _goToBillingDetailPage(context);
//         },
//         tooltip: 'Add Billing',
//         shape: const CircleBorder(),
//         child: const Icon(Icons.add),
//       ),
//       body: [
//         /// Home page
//         Card(
//           shadowColor: Colors.transparent,
//           color: Colors.green,
//           margin: const EdgeInsets.all(20.0),
//           child: SizedBox.expand(
//             child: Center(
//               child: Text(
//                 'Home page',
//                 style: theme.textTheme.titleLarge,
//               ),
//             ),
//           ),
//         ),
//
//         /// Notifications page
//         const Padding(
//           padding: EdgeInsets.all(10),
//           child: Column(
//             children: [
//               Card(
//                 child: ListTile(
//                   leading: Icon(Icons.notifications_sharp),
//                   title: Text('Notification 1'),
//                   subtitle: Text('This is a notification'),
//                 ),
//               ),
//               Card(
//                 child: ListTile(
//                   leading: Icon(Icons.notifications_sharp),
//                   title: Text('Notification 2'),
//                   subtitle: Text('This is a notification'),
//                 ),
//               ),
//             ],
//           ),
//         ),
//
//         /// Messages page
//         ListView.builder(
//           reverse: true,
//           itemCount: 2,
//           itemBuilder: (BuildContext context, int index) {
//             if (index == 0) {
//               return Align(
//                 alignment: Alignment.centerRight,
//                 child: Container(
//                   margin: const EdgeInsets.all(8.0),
//                   padding: const EdgeInsets.all(8.0),
//                   decoration: BoxDecoration(
//                     color: theme.colorScheme.primary,
//                     borderRadius: BorderRadius.circular(8.0),
//                   ),
//                   child: Text(
//                     'Hello',
//                     style: theme.textTheme.bodyLarge!
//                         .copyWith(color: theme.colorScheme.onPrimary),
//                   ),
//                 ),
//               );
//             }
//             return Align(
//               alignment: Alignment.centerLeft,
//               child: Container(
//                 margin: const EdgeInsets.all(8.0),
//                 padding: const EdgeInsets.all(8.0),
//                 decoration: BoxDecoration(
//                   color: theme.colorScheme.primary,
//                   borderRadius: BorderRadius.circular(8.0),
//                 ),
//                 child: Text(
//                   'Hi!',
//                   style: theme.textTheme.bodyLarge!
//                       .copyWith(color: theme.colorScheme.onPrimary),
//                 ),
//               ),
//             );
//           },
//         ),
//       ][currentPageIndex],
//       bottomNavigationBar: SizedBox(
//         height: 64,
//         child: BottomAppBar(
//           color: Theme.of(context).colorScheme.primary,
//           // shape: const CircularNotchedRectangle(), //形状
//           child: Row(
//             mainAxisSize: MainAxisSize.max,
//             mainAxisAlignment: MainAxisAlignment.spaceBetween,
//             children: [
//               IconButton(
//                 onPressed: () {
//                   _pageController.animateToPage(0,
//                       duration: const Duration(milliseconds: 200),
//                       curve: Curves.easeInOut);
//                 },
//                 icon: const Icon(Icons.menu),
//                 color: Colors.white,
//               ),
//               Padding(
//                 padding: const EdgeInsets.only(left: 0),
//                 child: IconButton(
//                   onPressed: () {
//                     _pageController.animateToPage(1,
//                         duration: const Duration(milliseconds: 200),
//                         curve: Curves.easeInOut);
//                   },
//                   icon: const Icon(Icons.bar_chart),
//                   color: Colors.white,
//                 ),
//               ),
//               IconButton(
//                 onPressed: () {
//                   _pageController.animateToPage(2,
//                       duration: const Duration(milliseconds: 200),
//                       curve: Curves.easeInOut);
//                 },
//                 icon: const Icon(Icons.settings),
//                 color: Colors.white,
//               )
//             ],
//           ),
//         ),
//       ));
// }
}
